<template>
  <div>
    <!-- 头部导航 -->
    <div class="box">
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入小区或地址"
          @search="onSearch"
          @click="$router.push('/city')"
          left-icon="search"
          background="#21b97a"
          show-action
        >
          <template #left>
            <!-- 左箭头 -->
            <van-icon name="arrow-left" color="#fff" size="20" @click="event" />
          </template>
          <template #action>
            <van-icon
              name="location-o"
              size="20"
              color="#fff"
              @click="$router.push('/map')"
            />
          </template>
          <template #label
            >{{ city.label }}
            <van-icon name="arrow-down" />
          </template>
        </van-search>
      </form>
    </div>
    <!-- 下拉选择 -->
    <van-dropdown-menu active-color="#21b97a">
      <!-- 区域 -->
      <van-dropdown-item title="区域" ref="item" class="btns">
        <!-- 内容 -->
        <van-picker :columns="list" />
      </van-dropdown-item>
      <div class="btns">
        <div class="btns-one">取消</div>
        <div class="btns-two">确认</div>
      </div>
      <!-- 方式 -->
      <van-dropdown-item title="方式" ref="item" class="btns">
        <!-- 方式 内容 -->
        <van-picker
          :columns="modeList"
          @confirm="onConfirm1"
          @cancel="onCancel"
          @change="onChange"
        />
        <div class="btns">
          <div class="btns-one">取消</div>
          <div class="btns-two">确认</div>
        </div>
      </van-dropdown-item>
      <!-- 租金 -->
      <van-dropdown-item title="租金" ref="item" class="btns">
        <!-- 租金内容 -->
        <van-picker
          :columns="rentList"
          @confirm="onConfirm1"
          @cancel="onCancel"
          @change="onChange"
        />
        <div class="btns">
          <div class="btns-one">取消</div>
          <div class="btns-two">确认</div>
        </div>
      </van-dropdown-item>
      <!-- 筛选 -->
      <van-dropdown-item
        title="筛选"
        ref="item"
        class="btns"
        @open="show = true"
      >
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <!-- 户型 -->
      <p class="title-h">户型</p>
      <div class="room-box-min">
        <div class="room-box" v-for="item in roomList" :key="item">
          <span>{{ item }}</span>
        </div>
        <van-divider :style="{ borderColor: '#bcbcbc' }" />
      </div>
      <!-- 方向 -->
      <p class="title-h">朝向</p>
      <div class="room-box-min">
        <div class="room-box" v-for="item in orientedList" :key="item">
          <span>{{ item }}</span>
        </div>
        <van-divider :style="{ borderColor: '#bcbcbc' }" />
      </div>
      <!-- 楼层 -->
      <p class="title-h">楼层</p>
      <div class="room-box-min">
        <div class="room-box" v-for="item in floorList" :key="item">
          <span>{{ item }}</span>
        </div>
        <van-divider :style="{ borderColor: '#bcbcbc' }" />
      </div>
      <!-- 房屋亮点 -->
      <p class="title-h">房屋亮点</p>
      <div class="room-box-min">
        <div class="room-box" v-for="item in characteristicList" :key="item">
          <span>{{ item }}</span>
        </div>
        <van-divider :style="{ borderColor: '#bcbcbc' }" />
      </div>
    </van-popup>
    <!-- 租房详情 -->
    <van-cell-group>
      <div class="details-box">
        <van-image
          width="106"
          height="80"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="flex-box">
          <h4>Dgfsd</h4>
          <span class="span-one">/123//金沙雅苑(二期)</span>
          <span class="span-two">近地铁</span>
          <span class="span-three">11111<i>元/月</i></span>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getCondition } from '@/api/area'
export default {
  name: 'home-title',
  data() {
    return {
      value: '',
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      },
      // 下拉选择
      // 第二个 方式
      // 筛选弹窗
      show: false,
      list: [],
      modeList: [],
      rentList: [],
      roomList: [],
      orientedList: [],
      floorList: [],
      characteristicList: []
    }
  },
  // 获取数据
  async created() {
    // 区域
    const res = await getCondition()
    console.log(res)
    const arr = [res.body.area, res.body.subway]
    this.changelabel(arr, this.list)
    // console.log(this.list)
    // 方式
    const res1 = await getCondition()
    res1.body.rentType.forEach((item) => {
      this.modeList.push(item.label)
    })
    // 租金
    const res2 = await getCondition()
    res2.body.price.forEach((item) => {
      this.rentList.push(item.label)
    })
    // 筛选/户型
    const res3 = await getCondition()
    res3.body.roomType.forEach((item) => {
      this.roomList.push(item.label)
    })
    // 筛选/朝向
    const res4 = await getCondition()
    res4.body.oriented.forEach((item) => {
      this.orientedList.push(item.label)
    })
    // 筛选/楼层
    const res5 = await getCondition()
    res5.body.floor.forEach((item) => {
      this.floorList.push(item.label)
    })
    // 筛选/房屋亮点
    // characteristic
    const res6 = await getCondition()
    res6.body.characteristic.forEach((item) => {
      this.characteristicList.push(item.label)
      // console.log(this.characteristicList)
    })
  },

  methods: {
    // 筛选弹窗
    showPopup() {
      this.show = true
    },
    onSearch(val) {
      Toast(val)
    },
    onConfirm() {
      this.$refs.item.toggle()
    },
    // 第二个 方式
    onConfirm1(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      Toast('取消')
    },
    changelabel(obj, newobj) {
      for (const key in obj) {
        if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
          newobj[key] = []
          this.changelabel(obj[key], newobj.children)
        } else if (
          Object.prototype.toString.call(obj[key]) === '[object Object]'
        ) {
          newobj[key] = {}
          this.changelabel(obj[key], newobj[key])
        } else {
          key === 'label' ? (newobj.text = obj[key]) : (newobj[key] = obj[key])
          if (obj[key] === 'null') newobj.children = []
        }
      }
    },
    event() {
      this.$router.push('/article')
    }
  }
}
</script>

<style scoped lang="less">
// 头部导航
::v-deep .van-icon-arrow-left:before {
  padding-right: 15px;
}
// 下拉选择
.btns {
  border-radius: 1px solid #21b97a;
  text-align: center;
  line-height: 50px;
  height: 50px;
  display: flex;
  .btns-one {
    flex: 1;
    color: #21b97a;
    background-color: #fff;
  }
  .btns-two {
    flex: 2;
    background-color: #21b97a;
    color: #fff;
  }
}
// 租房详情
.btns[data-v-7eb2bc79] {
  height: 0;
}
.details-box {
  padding: 20px;
  display: inline-flex;
  .van-image {
    display: flex;
  }
  .flex-box {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    h4 {
      padding-bottom: 5px;
    }
    .span-one {
      color: #b4b7b8;
      font-size: 12px;
      padding-bottom: 5px;
    }
    .span-two {
      color: #40c0cf;
      border-radius: 3px;
      text-align: center;
      line-height: 22px;
      width: 50px;
      height: 22px;
      font-size: 12px;
      background-color: #e1f5f8;
    }
    .span-three {
      padding-top: 5px;
      color: #fa5741;
      font-weight: 600;
      i {
        padding-left: 2px;
        font-size: 12px;
      }
    }
  }
}
// 弹出层
.title-h {
  font-size: 14px;
  padding: 20px;
}
.room-box-min {
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px;
  width: 250px;
  height: 200px;
  // background-color: #e1f5f8;
  span {
    display: inline-block;
    height: 32px;
    width: 70px;
    margin: 0 18px 15px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    color: #888;
  }
}
</style>
